<!DOCTYPE html>
<html manifest="http://aleonlinespot.altervista.org/manifest.php">
    <head>
        <meta charset="utf-8" />
        <title>MyPhotoMemories</title>

        <link rel="icon" href="img/favicons/icon32.png">
        <link rel="shortcut icon" href="img/favicons/icon32.png">
        <link rel="apple-touch-icon" href="img/favicons/icon57.png" sizes="57x57">
        <link rel="apple-touch-icon" href="img/favicons/icon114.png" sizes="114x114">
        <link rel="apple-touch-icon" href="img/favicons/icon72.png" sizes="72x72">
        <link rel="apple-touch-icon" sizes="80x80" href="img/favicons/icon80.png">
        <link rel="apple-touch-icon-precomposed" sizes="android-only" href="img/favicons/icon57.png">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <!-- jQuery mobile -->      
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>   
        <!-- jQuery url plugin -->
        <script type="text/javascript" src="../jQuery/jquery.url.js"></script>
        <!-- Gmaps for reverse geocoding -->
        <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA8vPFux0WblXQfMbOpgEbDKWCGh0cEt58&sensor=true">
        </script>
        <!-- model -->
        <script src="../model/photo.js"></script>
        <script src="../model/album.js"></script>
        <!-- view -->
        <script type="text/javascript" src="draw.js"></script>
        <script type="text/javascript" src="effects.js"></script>
        <!-- controller -->
        <script src="../controller/dbController.js"></script>
        <script src="../controller/fileController.js"></script>
        <script src="../controller/locationController.js"></script>
        <script src="../controller/cacheController.js"></script>
        <script src="../controller/supportController.js"></script>
        <!-- init script -->
        <script src="initViews.js"></script>


        <!-- css -->
        <link rel="stylesheet" href="css/myStyle.css" />
        <link rel="stylesheet" href="css/graphics.css" />

    </head>
    <body>
        <div data-role="page" id="shareFbView">
            <!-- Fb API -->
            <div id="fb-root"></div>
            <script>
                window.fbAsyncInit = function() {
                    FB.init({
                        appId      : '468759116484000', // App ID
                        channelUrl : '//aleonlinespot.altervista.org/channel.php', // Channel File
                        status     : true, // check login status
                        cookie     : true, // enable cookies to allow the server to access the session
                        xfbml      : true  // parse XFBML
                    });
                };

                // Load the SDK Asynchronously
                (function(d){
                    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
                    if (d.getElementById(id)) {return;}
                    js = d.createElement('script'); js.id = id; js.async = true;
                    js.src = "//connect.facebook.net/en_US/all.js";
                    ref.parentNode.insertBefore(js, ref);
                }(document));
            </script>
            <!-- ****** -->

            <script src="../jQuery/jquery.url.js"></script>

            <script> 
                var p;
                
                $("#shareFbView").bind('pagebeforeshow', function(){
                    console.log("shareFbView pagebeforeshow");
                    
                    $.mobile.showPageLoadingMsg("a", "Loading image...");
                    
                    var albumId = sessionStorage.aid;
                    var photoId = sessionStorage.pid;
                    
                    p = dbCon.getPhotoFromId(photoId);
                    
                    var ts = cCon.getTimestamp(p.id);
                    
                    if (p != null){
                        console.log(p.path);
                        $("#SFVphoto").attr("src", p.path+ts);
                    }
                    else{
                        console.log("p is null!");
                    }
                    
                    var img = document.getElementById("SFVphoto");
                    img.onload = function(){
                        $.mobile.hidePageLoadingMsg();
                        if (sessionStorage.shouldPost == "true"){
                            console.log(sessionStorage.fbToken);
                            sessionStorage.shouldPost = null;
                            var cmt = sessionStorage.comment;
                            sessionStorage.comment = null;
                            post(p, cmt);
                        }
                    }
                    
                });              
                
            </script>

            <div data-role="header">
                <div class="logo">
                    <img src="img/logo/logo.png" alt="MyPhotoMemories"/>
                    <div class="rightHeader">
                        <a href="index.html"  data-role="button" data-icon="home"  data-iconpos="notext"></a>
                    </div>
                </div>
            </div>
            <div data-role="content">
                <img id="SFVphoto" src="img/album/camera_big.png" class="thumb" />
                <form name="fbForm">
                    <div data-role="fieldcontainer">
                        <label for="SFVcomment">Comment</label>
                        <input type="text" id="SFVcomment" name="comment"/>
                    </div>
                </form>
            </div>
            <div data-role="footer" data-position="fixed">
                <a data-rel="back" data-role="button">Cancel</a>
                <a id="SFVsaveButton" data-role="button">Publish</a>
            </div>
        </div>        


    </body>


</html>

